<template>
  <div id="app">
    <mh :title="'商品列表案例'"></mh>
    <mt :list="list">
      <template #:tou>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>

      <template v-slot:shuju="scope">
        <td>{{ scope.item.id }}</td>
        <td>{{ scope.item.goods_name }}</td>
        <td>{{ scope.item.goods_price }}</td>
        <td>
          <input @keydown.enter="tian(scope)" v-model="scope.item.inputValue" @keydown.esc="scope.item.inputValue=''" @blur="scope.item.inputVisible=false"  v-focus v-if="scope.item.inputVisible" type="text" name="" id="">
          <button class="btn btn-danger btn-sm az" v-else @click="scope.item.inputVisible=true">Tags</button><br>
          <span class="badge bg-warning text-dark op" v-for="(item, index) in scope.item.tags" :key="index">{{
            item
          }}</span>
        </td>
        <td>
          <button class="btn btn-danger btn-sm" @click="odd(scope.item.id)">删除</button>
        </td>
      </template>
    </mt>
  </div>
</template>

<script>
import mh from "../components/mh.vue";
import mt from "../components/mt.vue";
export default {
  directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
},
  name: "SecondtimeMg",
  components: {
    mh,
    mt,
  },
  data() {
    return {
      list: [],
    };
  },

  mounted() {},

  methods: {
    odd(val) {
      this.list.splice(
        this.list.findIndex((item) => item.id == val),
        1
      );
    },
    tian(scope){
      if(scope.item.inputValue.length==0){
        return alert('不能输入空')
      }else{
scope.item.tags.push(scope.item.inputValue)
scope.item.inputValue=''
      }
      
    }
  },
  created() {
    this.$axios({
      url: "/api/goods",
    }).then(({ data: res }) => {
      this.list = res.data;
      console.log(this.list);
    });
  },
};
</script>

<style lang="less" scoped>
#app {
  padding-top: 45px;
  .op{
    margin-right: 10px;
  }
  .az{
    background-color: skyblue;
    border: 1px solid #ffff;
  }
}
</style>
